<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生单页路由</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div id="box">
    <div class="content">
      <!-- 这是页面内容的容器 -->
    </div>
    <ul class="footer">
      <li path="#/home">首页</li>
      <li path="#/goodstype">商品分类</a></li>
      <li path="#/car">购物车</li>
      <li path="#/collection">收藏</li>
      <li path="#/my">我的</li>
    </ul>
  </div>
  <script type="module">
    import {
      homePage,
      myPage,
      goodstypePage,
      carPage,
      collectionPage,
    } from './js/page.js'

    import { createRouter } from './js/router.js'

    createRouter('hash', [
      {
        path: "/home",
        component: homePage()
      },
      {
        path: "/goodstype",
        component: goodstypePage()
      },
      {
        path: "/car",
        component: carPage()
      },
      {
        path: "/my",
        component: myPage()
      },
      {
        path: "/collection",
        component: collectionPage()
      }
    ])
  </script>
</body>

</html>